<template>
    <div>父子通信的几种方式：</div>
    <div>
        <el-divider content-position="left">1、{{msg}}，defineProps</el-divider>
        <div>
            <Child :parentMsg="parentMsg" />
        </div>
    </div>
   
    <div>
        <el-divider content-position="left">2、子->父通信，defineEmit</el-divider>
        <Child  @parentEvent="parentEvent"/>
        <div>{{ childmsg }}</div>
    </div>
  
    <div>
        <el-divider content-position="left">3、依赖注入Provide/Inject(单向的)</el-divider>
        <p>原理：父组件作为依赖提供者即provide，后代作为注入者即inject。数据通过父组件进行流通。</p>
        <div>  <Child1 /> </div>
    </div>
   
    <div>
        <el-divider content-position="left">4、Vuex</el-divider>
        <div></div>
    </div>

</template>

<script setup>
import { ref, onMounted ,provide} from "vue";
import Child from './child.vue';
import Child1 from './child1.vue';
let msg = '这是父->子通信';
let parentMsg='这是来自父组件的信息';

let childmsg = ref('');
function parentEvent (msg){
    console.log('hshhsh....>',msg);
    childmsg.value = msg
}

provide('parentMsg',parentMsg)
</script>